<template>
  <div>
    <el-container style="height: 100vh; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgba(63, 63, 63, 1)">
        <div>
          <img
            style="background-color: #fff"
            src="http://www.mobiletrain.org/images/index/new_logo.png?t=5.28"
          />
        </div>
        <!-- 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
        <el-menu router>
          <el-menu-item index="/admin/home">首页</el-menu-item>
          <el-menu-item index="/admin/project">项目管理</el-menu-item>
          <el-menu-item index="/admin/cost">费用管理</el-menu-item>
          <el-menu-item index="/admin/food">订餐管理</el-menu-item>
          <el-menu-item index="/admin/contract">合同管理</el-menu-item>
          <el-menu-item index="/admin/talents">人才管理</el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown @command="dropdownfn">
            <!-- 自定义点击指令 -->
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="drop_out">退出登录</el-dropdown-item>
                 <!-- <el-dropdown-item command="c">出登录</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>
          <!-- 子路由 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
    
    };
  },
    methods: {
        dropdownfn(e){
          // console.log(e);
         if(e === "drop_out"){
           // 这个组件是e点击某一个按钮输出某一个值,判断e的值等于自定义的值就正确,然后触发回调函数
          // 退出按钮
          this.$store.commit('user/logout')
          // 同步获取vuex中删除token值的方法
          this.$router.replace('/login').catch(()=>{})
         }
        }
      },
};
</script>

<style lang="scss" scoped>
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

  .el-menu-item {
    background-color: rgba(63, 63, 63, 1);
    color: #fff;
  }

  .el-menu-item:hover {
    background-color: #fff;
    font-weight: 700;
    color: gold;
  }
</style>